<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="标题" prop="title">
				<el-input
						v-model="queryParams.title"
						placeholder="请输入标题"
						clearable
						@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="创建时间">
				<el-date-picker
					v-model="dateRange"
					style="width: 240px"
					value-format="yyyy-MM-dd"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 工具栏 -->
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['btn.AppVedio.add']"
				>新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
					v-hasPermi="['btn.AppVedio.remove']"
				>删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['btn.AppVedio.export']"
				>导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>
		<!-- 表单组件 -->
		<el-table v-loading="loading" :data="appVedioList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column v-if="false" label="视频id" align="center" prop="id" />
			<el-table-column v-if="false" label="文件ID" align="center" prop="mediaFileId" />
			<el-table-column label="标题" align="center" prop="title" />
			<el-table-column label="预览" align="center" prop="title" >

        <template slot-scope="scope">
          <el-image :src="scope.row.picShow"
                    style="width: 100px; height: 100px"
                    @click="handleClick(scope.row.vedio)"/>
        </template>
      </el-table-column>
			<el-table-column v-if="false" label="链接" align="center" prop="url" />
      <el-table-column label="标签" align="center" prop="tags">
        <template slot-scope="scope">
          <el-tag
            style="margin-top: 5px;"
            size="small"
            :key="tag"
            v-for="tag in scope.row.tags"
            :disable-transitions="false">
            {{tag}}
          </el-tag>
        </template>
      </el-table-column>
			<el-table-column label="上传人" align="center" prop="username" />
			<el-table-column label="热度" align="center" prop="hot" />
			<el-table-column label="上传时间" align="center" prop="createDate" />
			<el-table-column label="修改时间" align="center" prop="changeDate" />
			<el-table-column label="备注" align="center" prop="remark" />
			<el-table-column label="视频访问地址" align="center" prop="vedio" />
			<el-table-column label="状态" align="center" prop="status">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.sys_is_show" :value="scope.row.status"/>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['btn.AppVedio.update']"
					>修改</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['btn.AppVedio.remove']"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页组件 -->
		<el-pagination :current-page="queryParams.current" :total="total" :page-size="queryParams.size" style="padding: 30px 0; text-align: center;"
			layout="total, prev, pager, next, jumper" @current-change="getList" />
		<!-- 添加或修改AppVedio对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
        <el-form-item label="选择上传图片：" prop="showPic">
          <!-- 上传图片 -->
          <el-upload class="avatar-uploader uploadclass"
                     action=""
                     :show-file-list="false"
                     :http-request="uploadMainImg"
          >
            <img v-if="form.showPic" :src="form.showPic" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="图片地址" prop="pic">
          <el-input :disabled="true" v-model="form.pic" placeholder="图片地址" />
        </el-form-item>
        <el-form-item label="选择上传视频：" prop="showVedio">
          <!-- 上传图片 -->
          <el-upload class="avatar-uploader"
                     action=""
                     :show-file-list="false"
                     :http-request="uploadMainVedio"
          >
<!--            <video-component v-if="false" :vedioUrl="vedioUrl"></video-component>-->
<!--            <video-component v-if="vedioUrl" :vedioUrl="vedioUrl"></video-component>-->
<!--            <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
            <i class="el-icon-plus avatar-uploader-iconex"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="" prop="id" style="margin-top: 30px;margin-bottom: 50px;">
          <video-component v-if="vedioUrl" :vedioUrl="vedioUrl"></video-component>
        </el-form-item>
<!--        <el-form-item label="选择上传视频" prop="id">-->
<!--          <video-component v-if="false"></video-component>-->
<!--          <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--        </el-form-item>-->
				<el-form-item label="视频id" prop="id">
					<el-input :disabled="true" v-model="form.id" placeholder="请输入视频id" />
				</el-form-item>
				<el-form-item v-if="false" label="文件ID" prop="mediaFileId">
					<el-input :disabled="true" v-model="form.mediaFileId" placeholder="请输入文件ID" />
				</el-form-item>
        <el-form-item  label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入链接" />
        </el-form-item>
				<el-form-item v-if="false" label="链接" prop="url">
					<el-input :disabled="true" v-model="form.url" placeholder="请输入链接" />
				</el-form-item>
        <el-form-item label="标签" prop="tags">
          <!--					<el-input v-model="form.tags" placeholder="请输入标签" />-->
          <el-tag
            size="medium"
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增标签</el-button>
        </el-form-item>
				<el-form-item label="上传人" prop="username">
					<el-input :disabled="true" v-model="form.username" placeholder="请输入上传人" />
				</el-form-item>
				<el-form-item label="热度" prop="hot">
					<el-input v-model="form.hot" placeholder="请输入热度" />
				</el-form-item>
				<el-form-item label="上传时间" prop="createDate">
					<el-input :disabled="true" v-model="form.createDate" placeholder="请输入上传时间" />
				</el-form-item>
				<el-form-item label="修改时间" prop="changeDate">
					<el-input :disabled="true" v-model="form.changeDate" placeholder="请输入修改时间" />
				</el-form-item>
				<el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in dict.type.sys_is_show"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
				</el-form-item>
				<el-form-item label="视频访问地址" prop="vedio">
					<el-input :disabled="true" v-model="form.vedio" placeholder="请输入视频访问地址" />
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

    <!-- Vedio弹框 -->
    <el-dialog :title="title" :visible.sync="vedioOpen" width="600px" append-to-body>

      <video style="width: 550px;" controls>
        <source :src="ylVedio" type="video/mp4">
      </video>
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--        <el-button @click="cancel">取 消</el-button>-->
<!--      </div>-->
    </el-dialog>
	</div>
</template>
<!-- js脚本 -->
<script>
import videoComponent from '@/components/Vedio/VideoComponent.vue'
import { delAppVedioById, addAppVedio, updateAppVedioById, getAppVedioById,loadDataList } from "@/api/pcwl/appVedio";
import {uploadImg} from "@/api/pcwl/file";
export default {
	name: "AppVedio",
  components: {
    videoComponent
  },
	dicts: ['sys_normal_disable','sys_is_show'],
	data() {
		return {
      ylVedio:'',
      // Tag数据
      dynamicTags: ['标签一', '标签二', '标签三'],
      inputVisible: false,
      inputValue: '',
      vedioUrl:'http://203.104.39.15:9000/npdxpcwl/Vedio/2024/03/01/bc9e2032.mp4',
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 岗位表格数据
			appVedioList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
      vedioOpen: false,
			// 日期范围
			dateRange: [],
			// 查询参数
			queryParams: {
				current: 1,
				size: 10,
				id: undefined,
				mediaFileId: undefined,
				url: undefined,
				tags: undefined,
				username: undefined,
				hot: undefined,
				createDate: undefined,
				changeDate: undefined,
				status: undefined,
				remark: undefined,
				vedio: undefined,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				id: [
					{ message: "视频id不能为空", trigger: "blur" }
				],
			}
		};
	},
	created() {
		this.getList();
	},
	methods: {
		/** 查询视频信息列表 */
		getList(currentPage=1) {
			this.loading = true;
			this.queryParams.current=currentPage;
			// loadDataList(this.queryParams).then(response => {
			loadDataList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
				this.appVedioList = response.data.records;
				this.total = response.data.total;
        this.appVedioList.forEach(obj => {
          obj.videoShow=process.env.VUE_APP_MINIOURL+'/'+obj.vedio;
          obj.picShow=process.env.VUE_APP_MINIOURL+'/'+obj.pic;
          if (obj.tags)
          {
            obj.tags = obj.tags.split(',');
          }
          else
          {
            obj.tags = [];
          }
          // console.log(obj);
        });
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: undefined,
				mediaFileId: undefined,
				url: undefined,
				tags: undefined,
				username: undefined,
				hot: undefined,
				createDate: undefined,
				changeDate: undefined,
				status: undefined,
				remark: undefined,
				vedio: undefined,
        pic:undefined,
			};
			this.resetForm("form");
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.current = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.appVedioId)
			this.single = selection.length!=1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
      this.vedioUrl=undefined;
      this.dynamicTags=[];
			this.open = true;
			this.title = "添加视频信息";
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const appVedioId = row.id || this.ids
			getAppVedioById(appVedioId).then(response => {
				this.form = response.data;
        console.log(this.form)
        this.vedioUrl=process.env.VUE_APP_MINIOURL+'/'+this.form.vedio;
        this.form.showPic=process.env.VUE_APP_MINIOURL+'/'+this.form.pic;
        if (this.form.tags!=null)
        {
          this.dynamicTags= this.form.tags.split(",");
        }
        else
        {
          this.dynamicTags=[];
        }
				this.open = true;
				this.title = "修改视频信息";
			});
		},
		/** 提交按钮 */
		submitForm: function() {
			this.$refs["form"].validate(valid => {
        this.form.tags=this.dynamicTags.join(",");
				if (valid) {
					if (this.form.id != undefined) {
						updateAppVedioById(this.form,this.form.id).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.open = false;
							this.getList();
						});
					} else {
						addAppVedio(this.form).then(response => {
							this.$modal.msgSuccess("新增成功");
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const appVedioId = row.id || this.ids;
			this.$modal.confirm('是否确认删除视频信息编号为"' + appVedioId + '"的数据项？').then(function() {
				return delAppVedioById(appVedioId);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download('appVedio/export', {
				...this.queryParams
			}, `post_${new Date().getTime()}.xlsx`)
		},
    // 上传图片, file 上传的图片对象
    uploadMainImg(file) {
      // this.vedioUrl=undefined;
      // console.log('file', file)
      const data = new FormData()
      data.append('file', file.file)
      data.append('categoryId',2)
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      uploadImg(data).then(response => {

        // 将之前的图片删除，
        this.deleteImg()
        // 回显图片
        this.form.pic = response.data[0];
        this.form.showPic=process.env.VUE_APP_MINIOURL+'/'+this.form.pic;
        loading.close();
        console.log(this.vedioUrl)
        // console.log(this.form.showPic);
      }).catch(error => {
        this.$message({
          type: 'error',
          message: '上传失败'
        })
        loading.close();
      })
    },
    // 上传图片, file 上传的图片对象
    uploadMainVedio(file) {
      this.vedioUrl=undefined;
      // console.log('file', file)
      const data = new FormData()
      data.append('file', file.file)
      data.append('categoryId',2)
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      uploadImg(data).then(response => {
        // console.log(process.env.VUE_APP_BASE_API);
        // console.log(process.env.VUE_APP_MINIOURL);

        // 将之前的图片删除，
        this.deleteImg()
        // 回显图片
        this.form.vedio = response.data[0];
        this.vedioUrl=process.env.VUE_APP_MINIOURL+'/'+this.form.vedio;
        loading.close();
        // console.log(this.form.showPic);
      }).catch(error => {
        this.$message({
          type: 'error',
          message: '上传失败'
        })
        loading.close();
      })
    },
    // 删除图片
    deleteImg() {
      // // 如果之前有图片，则删除之前的
      // if(this.form.pic && this.form.pic !== this.oldImageUrl
      // ) {
      //   // 发送请求删除
      //   commonApi.deleteImg(this.formData.imageUrl)
      // }
      console.log('删除图片', this.form.pic)
    },
    // tage方法
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleClick(val) {
      this.ylVedio =process.env.VUE_APP_MINIOURL+'/'+ val;
      this.vedioOpen=true;
      console.log('Image clicked!');
      // 在这里添加你的点击事件逻辑
    }
	}
};
</script>
<style scoped>
.avatar-uploader el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  //width: 30px;
  //height: 30px;
  //line-height: 30px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}
.avatar-uploader-iconex {
  font-size: 28px;
  color: #8c939d;
  //width: 178px;
  //height: 178px;
  //line-height: 178px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
//border: 2px solid black;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

</style>
